<template>
  <div class="data-card">
    <div class="legend-container">
      <div class="legend">
        <div class="flex">
          <div class="icon icon_1"></div>
          <div class="name">任务总数</div>
        </div>
        <div class="value">167</div>
      </div>
      <div class="legend">
        <div class="flex">
          <div class="icon icon_2"></div>
          <div class="name">已完成数</div>
        </div>
        <div class="value">110</div>
      </div>
      <div class="legend">
        <div class="flex">
          <div class="icon icon_3"></div>
          <div class="name">延期数</div>
        </div>
        <div class="value">57</div>
      </div>
    </div>
    <div class="pie-dom" ref="pie-dom"></div>
    <div class="total">
      <div>65.9%</div>
      <div>月度计划进度</div>
    </div>
  </div>
</template>

<script>
//月度计划完成情况
import echarts from "echarts";
export default {
  data() {
    return {
      pieInstance: null,
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.drawPieChar();
    });
  },
  methods: {
    drawPieChar() {
      let chart_dom = this.$refs["pie-dom"];
      this.pieInstance = echarts.init(chart_dom);
      var dataHigh = 65.9;
      let baseOpt = {
        tooltip: {
          show: false,
        },
        series: [
          {
            name: "高级风险",
            type: "pie",
            center: ["30%", "50%"],
            radius: ["50%", "60%"],
            startAngle: 180, //起始角度
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            hoverAnimation: false,
            emphasis: false,
            data: [
              {
                value: dataHigh,
                name: "",
                itemStyle: {
                  normal: {
                    color: "#1677FF",
                  },
                },
              },
              {
                name: "",
                itemStyle: {
                  emphasis: {
                    color: "#e6e9f0",
                  },
                  normal: {
                    color: "#e6e9f0",
                  },
                },
                value: 100 - dataHigh, // 总数减去当前项数(灰色占比)
              },
            ],
          },
        ],
      };
      this.pieInstance.setOption(baseOpt);
      //开启响应式
      window.addEventListener("resize", () => {
        this.pieInstance.resize();
      });
    },
  },
  destroyed() {
    this.pieInstance && this.pieInstance.dispose();
  },
};
</script>

<style lang="less" scoped>
.data-card {
  height: 100%;
  width: 100%;
  position: relative;
  .legend-container {
    position: absolute;
    top: 76px;
    right: 72px;
    .legend {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-family: Microsoft YaHei, Microsoft YaHei;
      font-weight: 400;
      margin-bottom: 32px;
      .icon {
        width: 16px;
        height: 16px;
        margin-right: 10px;
      }
      .icon_1 {
        background: url(https://jszhgd.cn/static/pc/low-code/icon_1.png)
          no-repeat;
        background-size: 100% 100%;
      }
      .icon_2 {
        background: url(https://jszhgd.cn/static/pc/low-code/icon_2.png)
          no-repeat;
        background-size: 100% 100%;
      }
      .icon_3 {
        background: url(https://jszhgd.cn/static/pc/low-code/icon_3.png)
          no-repeat;
        background-size: 100% 100%;
      }
      .name {
        font-size: 14px;
        color: #666666;
        margin-right: 24px;
      }
      .value {
        font-weight: 400;
        font-size: 18px;
        color: #333333;
      }
    }
    :nth-child(3) {
      margin-bottom: 0;
    }
  }
  .pie-dom {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
  .total {
    position: absolute;
    text-align: center;
    top: 50%;
    left: 120px;
    transform: translateY(-50%);
    font-family: D-DIN, D-DIN;
    font-weight: 400;
    font-size: 14px;
    color: #666666;
    :nth-child(1) {
      color: #333333;
      font-size: 32px;
    }
  }
}
</style>
